<template>
  <el-form-item label="选择规格" prop="id" :rules="rules">
    <el-select v-model="selectedProductModel" @change="selectProduct" placeholder="请选择规格" clearable>
      <el-option v-for="(item) in options" :key="item.id" :label="item.name" :value="item.id"/>
    </el-select>
  </el-form-item>
</template>

<script lang="ts" setup>
import {IStoreProductRow} from "@/api/modules/pointsMall";

const props = defineProps<{
  options: IStoreProductRow[]
}>()
const emits = defineEmits(['change'])
const selectedProductModel = ref()

const selectProduct = (id: number) => {
  const row = props.options.find(item => item.id === id)
  emits('change', row)
}

const rules = [{
  required: true,
  // message: '请选择规格',
  // trigger: 'change'
  validator: (rule:any, value:any, callback:any) => {
    if (!selectedProductModel.value) {
      callback('请选择规格')
    } else {
      callback()
    }
  }
}]

</script>

<style scoped lang="scss">

</style>
